import React from 'react';
import { Link } from 'react-router-dom';
import { Eye, Calendar, Tag, Phone, User, MapPin } from 'lucide-react';
import { Button } from 'antd';
import { Card } from '../ui';
import { Case } from '../../types';
import { formatDate } from '../../utils';

export interface CaseCardProps {
  caseItem: Case;
  variant?: 'default' | 'compact' | 'featured';
  className?: string;
  onViewDetails?: () => void;
  onContact?: () => void;
}

export const CaseCard: React.FC<CaseCardProps> = ({
  caseItem,
  variant = 'default',
  className,
  onViewDetails,
  onContact
}) => {
  const showActions = true;
  const cardVariant = variant === 'featured' ? 'feature' : variant === 'compact' ? 'default' : 'interactive';

  return (
    <Card 
      variant={cardVariant}
      className={`group relative overflow-hidden transition-smooth hover-lift ${
        variant === 'featured' ? 'border-2 border-primary-200 shadow-lg' : ''
      } ${className || ''}`}
      hoverable
    >
      {/* 案例图片 */}
      <div className="relative mb-4 overflow-hidden rounded-lg">
        <img
          src={caseItem.images?.[0] || '/placeholder-case.jpg'}
          alt={caseItem.title}
          className="w-full h-48 sm:h-52 md:h-56 object-cover transition-transform duration-300 group-hover:scale-105"
        />
        
        {/* 推荐标签 */}
        {caseItem.featured && (
          <div className="absolute top-3 right-3">
            <span className="px-3 py-1 bg-gradient-to-r from-accent-500 to-accent-600 text-white text-xs font-medium rounded-full shadow-lg backdrop-blur-sm">
              精选案例
            </span>
          </div>
        )}
        
        {/* 悬停操作按钮 - 桌面端显示 */}
        {showActions && (
          <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-300 flex items-center justify-center opacity-0 group-hover:opacity-100 hidden md:flex">
            <div className="flex gap-3">
              <Button
                type="primary"
                size="small"
                className="bg-white text-primary-600 hover:bg-gray-100 shadow-lg backdrop-blur-sm"
                onClick={onViewDetails}
              >
                <Eye className="w-4 h-4 mr-1" />
                查看详情
              </Button>
              <Button
                type="default"
                size="small"
                className="bg-white border-white text-gray-700 hover:bg-gray-100 shadow-lg backdrop-blur-sm"
                onClick={onContact}
              >
                <Phone className="w-4 h-4 mr-1" />
                联系我们
              </Button>
            </div>
          </div>
        )}
      </div>
      
      {/* 案例信息 */}
      <div className="space-y-3">
        <div>
          <h3 className="text-lg font-semibold text-gray-900 group-hover:text-primary-600 transition-colors line-clamp-1">
            <Link to={`/cases/${caseItem.id}`} className="hover:text-primary-600">
              {caseItem.title}
            </Link>
          </h3>
          <div className="flex items-center space-x-4 mt-2 text-sm text-gray-500">
            <span className="flex items-center">
              <span className="w-2 h-2 bg-primary-500 rounded-full mr-1"></span>
              {caseItem.industry || caseItem.category}
            </span>
            {caseItem.clientName && (
              <span className="flex items-center">
                <User className="w-3 h-3 mr-1" />
                {caseItem.clientName}
              </span>
            )}
          </div>
        </div>
        
        <p className="text-sm text-gray-600 line-clamp-2 leading-relaxed">
          {caseItem.description}
        </p>
        
        {/* 案例亮点 */}
        {caseItem.highlights && caseItem.highlights.length > 0 && (
          <div className="flex flex-wrap gap-2">
            {caseItem.highlights.slice(0, 3).map((highlight, index) => (
              <span
                key={index}
                className="px-2 py-1 bg-gradient-to-r from-primary-50 to-primary-100 text-primary-700 text-xs rounded-md border border-primary-200 hover:shadow-sm transition-shadow"
              >
                {highlight}
              </span>
            ))}
            {caseItem.highlights.length > 3 && (
              <span className="px-2 py-1 bg-accent-50 text-accent-600 text-xs rounded-md font-medium">
                +{caseItem.highlights.length - 3}
              </span>
            )}
          </div>
        )}
        
        {/* 服务项目 */}
        {caseItem.services && caseItem.services.length > 0 && (
          <div className="flex flex-wrap gap-2">
            {caseItem.services.slice(0, 2).map((service, index) => (
              <span
                key={index}
                className="px-2 py-1 bg-gray-100 hover:bg-gray-200 text-gray-600 text-xs rounded-md transition-colors"
              >
                {service}
              </span>
            ))}
            {caseItem.services.length > 2 && (
              <span className="px-2 py-1 bg-secondary-50 text-secondary-600 text-xs rounded-md font-medium">
                +{caseItem.services.length - 2}
              </span>
            )}
          </div>
        )}
        
        {/* 项目信息和操作 */}
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-2 sm:space-y-0 pt-3 border-t border-gray-100">
          <div className="flex flex-col space-y-1 text-xs text-gray-500">
            {caseItem.completedAt && (
              <span className="flex items-center">
                <Calendar className="w-3 h-3 mr-1" />
                {formatDate(caseItem.completedAt)}
              </span>
            )}
            {caseItem.location && (
              <span className="flex items-center">
                <MapPin className="w-3 h-3 mr-1" />
                <span className="truncate">{caseItem.location}</span>
              </span>
            )}
          </div>
          
          <div className="flex items-center space-x-2">
            {caseItem.status === 'draft' && (
              <span className="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">
                草稿
              </span>
            )}
            
            {variant !== 'compact' && !showActions && (
              <Link to={`/cases/${caseItem.id}`}>
                <Button type="default" size="small">
                  查看详情
                </Button>
              </Link>
            )}
          </div>
        </div>
        
        {/* 移动端显示操作按钮 */}
        {showActions && (
          <div className="flex space-x-2 w-full md:hidden pt-2">
            <Button 
              type="default" 
              size="small"
              className="flex-1"
              onClick={onViewDetails}
            >
              <Eye className="w-4 h-4 mr-1" />
              详情
            </Button>
            {onContact && (
              <Button 
                type="primary" 
                size="small"
                className="flex-1"
                onClick={onContact}
              >
                <Phone className="w-4 h-4 mr-1" />
                咨询
              </Button>
            )}
          </div>
        )}
      </div>
    </Card>
  );
};

export default CaseCard;